<template>
  <el-card style="max-width: 1000px;margin:10px 0;height: 30px;padding:8px 10px">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/message/receivelikes' }">收到的赞</el-breadcrumb-item>
      <el-breadcrumb-item>点赞详情</el-breadcrumb-item>
    </el-breadcrumb>
  </el-card>
  <el-card style="max-width: 1000px;margin:10px 0;padding: 20px">
    <div class="content">{{content}}</div>
  </el-card>
  <el-card style="max-width: 1000px;margin:10px 0;padding: 20px">
    <div class="user-list">
      <div class="user-item" v-for="item in userList" :key="item.userId">
        <div class="avatar">
          <el-avatar :src="item.userAvatar" :size="40"></el-avatar>
        </div>
        <div class="right-box">
          <div class="right">
            <div class="info-text">
              <div class="like-text">
                <span class="nickname">{{ item.nickname }}</span>&nbsp;赞了我
              </div>
              <div class="time-text">
                {{ item.createTime }}
              </div>
            </div>
            <div class="care">
              <el-button>关注</el-button>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import {getCommentById, getDynamicById, getLikeUserList} from "@/api/api.js";

const route = useRoute()
let typeId = 0
let contentId = 0
const content = ref()
const userList = ref([])
onMounted(async ()=> {
  console.log("页面挂载了")
  typeId = Number(route.query.type)
  contentId = Number(route.query.contentId)
  let res = null
  // 根据内容id和类型查询内容
  if(typeId === 2){
    // 获取评论内容
    res = await getCommentById(contentId)
    console.log(res)
    content.value = res.data.content
  }else if(typeId === 3){
    // 获取动态文字信息
   res = await getDynamicById(contentId)
    content.value = res.data.contentText
  }else{
    // 获取弹幕文字信息
  }
  // 根据内容id和类型查询点赞人
  const res1 = await getLikeUserList(typeId,contentId);
  userList.value = res1.data
})
</script>
<style lang="scss" scoped>
:deep(.el-card__body){
  padding: 0;
}
.content{
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 30px;
  line-height: 20px;
  font-size: 14px;
}
.user-list{
  .user-item{
    display: flex;
    height: 100px;
    //justify-content: space-between;
    .avatar{
      width: 50px;
      height: 50px;
    }
    .right-box{
      width: 880px;
      height: 50px;
      .right{
        display: flex;
        .info-text{
          width: 850px;
          height: 50px;
          box-sizing: border-box;
          .like-text{

            height: 30px;

            color:var(--gray-font-color--);
            .nickname{
              font-weight: bold;
              font-size: 14px;
              color: black;
            }
          }
          .time-text{
            height: 20px;
            color:var(--gray-font-color--);
            font-size: 13px;
          }
        }
        .care{
          width: 60px;
        }
      }
    }


  }
}
</style>